<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>I don't care!</title>
</head>

<body>
	<!DOCTYPE html>
	<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* :root全局css变量搭配var()函数使用 */
			:root {
				--light-color: #fff
					/* --light-color: #ffffe0 */
			}

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				width: 100%;
				height: 100vh;
				background: #333;
			}

			.container {
				width: 100%;
				height: 100%;
				display: flex;
				overflow: hidden;
			}

			.light-container {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				transform: translateX(-38.2%);
				transition: all .5s;
				padding: 0 100vw;
			}

			.light {
				position: absolute;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: var(--light-color);
				transition: all 0.24s;

			}

			.light::before {
				content: '';
				position: absolute;
				width: 35px;
				height: 80px;
				border-radius: 10px;
				background: var(--light-color);
				left: 27.5%;
				top: -50px;
				border-top: 30px solid black;
			}

			.light span:nth-child(1) {
				position: absolute;
				width: 30px;
				height: 30px;
				background: transparent;
				box-shadow: 20px 20px 0 10px var(--light-color);
				border-bottom-right-radius: 40px;
				left: -4px;
				top: -16px;
				transform: rotate(342deg);
			}

			.light span:nth-child(2) {
				position: absolute;
				width: 30px;
				height: 30px;
				background: transparent;
				box-shadow: -20px 20px 0 10px var(--light-color);
				border-bottom-left-radius: 40px;
				right: -3.4px;
				top: -16px;
				transform: rotate(16deg);
			}

			.wire {
				width: 4px;
				height: 60vh;
				background-color: #8f8e8e;
				top: -18%;
				position: absolute;
				transition: all 0.24s;
			}

			.light::after {
				position: absolute;
				content: '';
				width: 140px;
				height: 140px;
				background: var(--light-color);
				border-radius: 50%;
				top: 50%;
				left: 0;
				filter: blur(40px);
				transform: translate(-18%, -40px);
				box-shadow: 0 0 10px var(--light-color),
					0 0 30px var(--light-color),
					0 0 60px var(--light-color),
					0 0 120px var(--light-color),
					0 0 200px var(--light-color),
				;
			}


			html {
				cursor: none;
			}

			button {
				display: none;
			}

			.transition {
				background: black;
				opacity: 0;
				animation: transi 4s ease-in forwards;
			}

			@keyframes transi {
				from {
					background: black;
					opacity: 0;
				}

				to {
					background: #333;
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="light-container">
				<div class="wire"></div>
				<div class="light">
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
		<button>关灯</button>
		<!--<img src="../img/IMG_20211004_213015.jpg"/>-->
		<script>
			var btns = document.querySelector("button");
			var body = document.querySelector("body");
			var wire = document.querySelector('.wire')
			var lightContainer = document.querySelector('.container')
			document.addEventListener("keydown", function (e) {
				if (event.keyCode === 122) {
					// 禁用f11
					event.returnValue = false;
				}
				e.returnValue = false;
				if (event.keyCode == 32)
					if (btns.innerHTML == "关灯") {
						document.documentElement.style.setProperty('--light-color', '#333')
						lightContainer.style.opacity = 0
						document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #333');
						body.removeAttribute("class", "transition")
						body.style.backgroundColor = "black"
						btns.style.color = "black"
						btns.innerHTML = "开灯"
						fullscreen(document.documentElement)
					} else {
						lightContainer.style.opacity = 1
						document.documentElement.style.setProperty('--light-color', '#fff')
						wire.style.background = '#8f8e8e'
						document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #000');

						if (e.keyCode !== 32) return
						body.style.class = "yellow"
						body.setAttribute("class", "transition")
						btns.style.backgroundColor = "transparent"
						btns.innerHTML = "关灯"
						cancelFullscreen()
					}
			})

			function fullscreen(element) {
				if (document.mozFullScreenEnabled) {
					return Promise.reject(new Error("全屏模式被禁用"));
				}
				let result = null;
				if (element.requestFullscreen) {
					result = element.requestFullscreen();
				} else if (element.mozRequestFullScreen) {
					result = element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
					result = element.msRequestFullscreen();
				} else if (element.webkitRequestFullscreen) {
					result = element.webkitRequestFullScreen();
				}
				return result || Promise.reject(new Error("不支持全屏"));
			}

			function cancelFullscreen() {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen();
				}
			}
		</script>
	</body>

	</html>
</body>

</html>